<template>
	<div class="systemControlPage">
		<div class="pageInfo">
			<div class="pageInfoRowHeader">
				<span class="title">控制台信息</span>
			</div>
			<div class="pageInfoRow">
				<span class="title">控制台版本信息</span>
			</div>
			<div class="pageInfoRow">
				<span class="title">当前版本号</span>
				<span class="text">{{ controlVersion }}</span>
			</div>
			<!-- <div class="pageInfoRow">
				<span class="title">上次控制台库更新时间</span>
				<span class="text">2002-09-09 14:18</span>
			</div>
			<div class="pageInfoRow">
				<span class="title titleLink" @click="versionRecord">版本升级记录</span>
			</div> -->
		</div>
		<div class="pageUpgrade">
			<div class="pageUpgradeHeader">
				<span>离线包导入升级</span>
			</div>
			<div class="pageUpgradeBody">
				<el-upload
					class="upload-demo"
					:action="actionStr"
					multiple
					:show-file-list="false"
					:on-change="fileChange"
					:on-progress="fileProgress"
				>
					<el-link type="primary">选择离线升级包</el-link>
				</el-upload>
				<div class="fileNameStyle">{{ "您选择的文件是：" + fileText }}</div>
			</div>
			<div class="pageUpgradeFooter">
				<span>上传进度：{{ loadProgress }}%，正在备份文件…</span>
				<el-button type="info" v-if="loadLoading" @click="controlUpgrade" :disabled="startUpgrade">控制台升级</el-button>
			</div>
		</div>
		<!-- 自定义alertBox弹框——记录 -->
		<AlertBox :alertBoxVisible="alertBoxTabVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>版本升级记录</p>
					<i class="wj-icon-guanbi" @click="alertBoxTabclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="tabList">
						<el-table :data="tableDataAlertBox" style="width: 100%" :cell-class-name="tableCellClassName">
							<el-table-column type="index" prop="id" width="50" label="序号"> </el-table-column>
							<el-table-column prop="upgradeDate" label="升级日期" width="180"> </el-table-column>
							<el-table-column prop="upgradeType" label="升级类型" width="180"> </el-table-column>
							<el-table-column prop="version" label="版本号"> </el-table-column>
							<el-table-column prop="upgradeResult" label="执行结果" width="180"> </el-table-column>
							<el-table-column prop="logDetails" label="详细日志" width="180">
								<template slot-scope="scope">
									<el-link type="primary" @click="handleRowDetails(scope.$index, scope.row)">查看</el-link>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="tabPage">
						<el-pagination
							background
							@size-change="handleSizeChangeAlertBox"
							@current-change="handleCurrentChangeAlertBox"
							:current-page="currentPageAlertBox"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="10"
							layout="total, sizes, prev, pager, next, jumper"
							:total="400"
						>
						</el-pagination>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——详情 -->
		<AlertBox :alertBoxVisible="alertBoxDetailsVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>版本升级记录详情</p>
					<i class="wj-icon-guanbi" @click="alertBoxDetailsclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="infoEveryItem">1. 下载升级包… 成功</div>
					<div class="infoEveryItem">2. 校验升级包… 成功</div>
					<div class="infoEveryItem">3. 解压升级文件到临时目录… 成功</div>
					<div class="infoEveryItem">4. 备份旧版本文件… 成功</div>
					<div class="infoEveryItem">5. 固件升级中… 失败，原因可能是：升级过程被异常中断。已经将版本恢复为V3.6.0</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="backPreList">返回上一级</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import httpUrl from "@/utils/request/httpUrl";
import { control_updata, control_platformUpgrade, control_getVersion } from "@/utils/request/api";
export default {
	name: "SystemControl",
	data() {
		return {
      // 开始升级的按钮
      startUpgrade: true,
			// 文件上传  文件名
			fileText: "",
			// 文件上传  组件需要用的action
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/platformFile"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/platformFile"
					: "",
			// 自定义弹窗控制——记录
			alertBoxTabVisible: false,
			// 自定义弹窗控制——详情
			alertBoxDetailsVisible: false,
			// 分页当前页码——弹窗
			currentPageAlertBox: 5,
			// 表格数据
			tableDataAlertBox: [
				{
					upgradeDate: "2022-03-03 15:30",
					upgradeType: "固件升级",
					version: "V3.6.1 build 20220808",
					upgradeResult: "成功",
					logDetails: "升级详情数据...",
				},
				{
					upgradeDate: "2022-03-03 15:30",
					upgradeType: "固件升级",
					version: "V3.6.1 build 20220808",
					upgradeResult: "成功",
					logDetails: "升级详情数据...",
				},
				{
					upgradeDate: "2022-03-03 15:30",
					upgradeType: "固件升级",
					version: "V3.6.1 build 20220808",
					upgradeResult: "成功",
					logDetails: "升级详情数据...",
				},
				{
					upgradeDate: "2022-03-03 15:30",
					upgradeType: "固件升级",
					version: "V3.6.1 build 20220808",
					upgradeResult: "失败",
					logDetails: "升级详情数据...",
				},
				{
					upgradeDate: "2022-03-03 15:30",
					upgradeType: "固件升级",
					version: "V3.6.1 build 20220808",
					upgradeResult: "失败",
					logDetails: "升级详情数据...",
				},
			],
			loadProgress: 0, // 上传进度百分比
			loadLoading: false, // 控制台升级按钮的显隐
			controlVersion: "", // 控制台当前版本
		};
	},
	created() {},
	mounted() {
		this.getControlVersion();
	},
	methods: {
		// 控制台版本号
		getControlVersion() {
			control_getVersion().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.controlVersion = res.data;
				} else {
					this.controlVersion = "----";
				}
			});
		},
		// 控制台升级
		controlUpgrade() {
			control_platformUpgrade()
				.then((res) => {
					console.log(res);
					if (res.code == 500) {
						this.$msg.error("控制台升级失败，请重新登录...");
					} else {
						this.$msg.info("即将返回登录，请重新登录...");
						this.$store.commit("set_token", null);
						localStorage.clear();
						this.$router.push(
							{ path: "/login" },
							(onComplete) => {
								console.log(onComplete);
							},
							(onabort) => {
								console.log(onabort);
							}
						);
					}
				})
				.catch((error) => {
					console.log(error);
					this.$msg.info("升级完成后将返回登录，请重新登录...");
					this.$store.commit("set_token", null);
					localStorage.clear();
					this.$router.push(
						{ path: "/login" },
						(onComplete) => {
							console.log(onComplete);
						},
						(onabort) => {
							console.log(onabort);
						}
					);
				});
		},
		// 文件上传  进度条
		fileProgress(event, file, fileList) {
			console.log(event);
			console.log(file);
			console.log(fileList);
			this.loadProgress = parseInt(event.percent);
			this.loadLoading = this.loadProgress == 100 ? true : false;
		},
		// 文件上传  文件发生改变
		fileChange(file, fileList) {
			console.log(file);
			console.log(fileList);
			// if (file.status !== 'ready') return;
			this.fileText = file.name;
			if (file.status == "success" && file.percentage == 100) {
				control_updata({
					file: file.raw,
				}).then((res) => {
					if (res.code === 200) {
						this.$msg.success("文件上传成功，请进行升级！");
            this.startUpgrade = false;
					} else {
            this.$msg.error("文件上传失败！" + res.auditInfo);
            this.startUpgrade = true;
					}
				});
			}
		},
		// 版本记录
		versionRecord() {
			this.alertBoxTabVisible = true;
		},
		// alertBox——记录 关闭
		alertBoxTabclose() {
			this.alertBoxTabVisible = false;
		},
		// 分页组件事件——弹窗
		handleSizeChangeAlertBox(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChangeAlertBox(val) {
			console.log(`当前页: ${val}`);
		},
		// 详情
		handleRowDetails(index, row) {
			console.log(index, row);
			// 关闭列表弹窗
			this.alertBoxTabVisible = false;
			// 打开详情弹窗
			this.alertBoxDetailsVisible = true;
		},
		// 成功和失败——文字样式
		tableCellClassName({ row, column, rowIndex, columnIndex }) {
			console.log(row);
			console.log(rowIndex);
			console.log(column);
			console.log(columnIndex);
			if (row.upgradeResult == "成功" && columnIndex == 4) {
				return "forbidden-row-success";
			}
			if (row.upgradeResult == "失败" && columnIndex == 4) {
				return "forbidden-row-default";
			}
			return "";
		},

		// alertBox——详情 关闭
		alertBoxDetailsclose() {
			this.alertBoxDetailsVisible = false;
		},
		// 返回上一次
		backPreList() {
			// 关闭详情弹窗
			this.alertBoxDetailsVisible = false;
			// 打开列表弹窗
			this.alertBoxTabVisible = true;
		},
	},
};
</script>
<style lang="less" scoped>
.systemControlPage {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	.pageInfo {
		width: 30%;
		/*height: 216px;*/
		border: 1px solid #eee;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.pageInfoRowHeader {
			width: 100%;
			height: 42px;
			font-size: 16px;
			background: #f2f2f2;
			border-bottom: 1px solid #d9d9d9;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			span.title {
				margin: 0 12px;
			}
		}
		.pageInfoRow {
			width: 100%;
			height: 42px;
			font-size: 16px;
			background: #ffffff;
			border-bottom: 1px solid #d9d9d9;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			span.title {
				margin: 0 12px;
				font-size: 14px;
			}

			span.titleLink {
				color: #2890bf;
			}
			span.titleLink:hover {
				cursor: pointer;
			}

			span.text {
				flex: 1;
				font-size: 14px;
				margin: 0 12px 0 0;
				color: #aeaeae;
				text-align: right;
			}
		}
		.pageInfoRow:last-child {
			border-bottom: none;
		}
	}
	.pageUpgrade {
		width: 69%;
		height: 216px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.pageUpgradeHeader {
			width: 100%;
			height: 42px;
			span {
				display: inline-block;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				padding: 0 12px;
				border: 1px solid #d9d9d9;
			}
		}
		.pageUpgradeBody {
			width: 100%;
			padding: 0 24px;
			box-sizing: border-box;
			height: calc(100% - 42px - 42px - 16px);
			margin: 8px 0;
			background: #f2f2f2;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			.fileNameStyle {
				font-size: 14px;
			}
		}
		.pageUpgradeFooter {
			width: 100%;
			height: 42px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			/deep/ .el-button {
				font-size: 14px;
				padding: 8px 18px;
				margin-right: 12px;
			}
			span {
				flex: 1;
			}
		}
	}
}
</style>
